<template>
    <div class="main">
        <Search :queryParams="queryParams" @formCommHandler="formCommHandler" style="overflow-y:auto;"></Search>
        <!-- <div class="mt10"></div> -->
        <div class='colsConfig clearfix' v-if='colsConfig'>
            <div class='fl mr10' 
                v-for='(item, index) in colsConfigData' 
                :key='index'>
                <!-- <label for="#">111</label> -->
                <el-checkbox 
                    v-model="item.isShow" 
                    v-if='item.label'
                    @change="colsConfigHandler(item, index)"
                >
                    {{item.label}}
                </el-checkbox>
            </div>
        </div>
        <el-dialog
            title="列配置"
            align='left'
            :visible.sync="colsConfigDialog"
            width="50%"
            :before-close="handleClose">
            <!-- <span>这是一段信息</span> -->
            <div class='clearfix'>
                <div class='fl' 
                    v-for='(item, index) in colsConfigDialogData' 
                    :key='index'>
                    <!-- <label for="#">111</label> -->
                    <el-checkbox 
                    class='mb10 ml20'
                        v-model="item.isShow" 
                        v-if='item.label'
                        @change="colsConfigHandler(item, index)"
                    >
                        {{item.label}}
                    </el-checkbox>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="colsConfigDialog = false">取 消</el-button>
                <el-button type="primary" @click="colsConfigDialogHandle">确 定</el-button>
            </span>
        </el-dialog>
        <standard-table v-bind="tableHeader" ref="table" @selectionChange="selectionChange"></standard-table>
    </div>   
</template>
<script>
import Search from '@/components/baseComponents/Search'
import StandardTable from '@/components/baseComponents/StandardTable'
export default {
    name: 'StandardTemplate',
    props: {
        queryParams: {
            type: Object
        },
        tableParams: {
            type: Object
        },
    },
    components: {
        Search,
        StandardTable
    },
    data() {
        return {
            selectedData:[],
            tableHeader:this.tableParams? this.tableParams : [],
            //是否支持表格列配置
            colsConfig: false, //页面展示配置形式   <= 20
            colsConfigDialog: false, //弹窗配置形式 >20
            colsConfigData: [],
            colsConfigDialogData: []
        }
    },
    watch: {
        tableParams (val, oldVal) {
            this.tableHeader = val;
           
        }
    },
    mounted() {
        this.initTable();
        this.colsConfigData = this.tableHeader.columns;
    },
    
    methods: {
        // 选中触发的事件
        selectionChange(selection){
            // 表格选中的数据
            this.selectedData = selection;
            this.$emit("selectedData",selection);
        },
        initTable() {
            this.$refs['table'].query({})
        },
        formCommHandler(data) {
            if(data.type == "search"){
                // debugger
                // console.log(1)
                this.$refs['table'].query(this.queryParams.queryData);
            }
            if(data.type == "reset"){
                // console.log(2)
                let params = this.queryParams.queryData
                for(var i in params){
                    params[i] = ''
                }
            }
            //列配置
            if(data.type == 'colsConfig'){
                const cols = this.tableHeader.columns.length
                if(cols <= 20) {
                    this.colsConfig = true
                }else {
                    this.colsConfigDialog = true
                    this.colsConfigDialogData = JSON.parse(JSON.stringify(this.colsConfigData))
                }
            }
            // 删除
            if(data.type == "del"){
                if(this.selectedData.length == 0){
                    this.$alert('请勾选要删除的数据！');
                }else{
                    let that = this;
                    that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        that.$emit('deleteHandler',that.selectedData)
                        console.log("这是要删除的数据");
                        console.log(that.selectedData);
                        // that.$message({
                        //     type: 'success',
                        //     message: '删除成功!'
                        // });
                    }).catch(() => {
                        that.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                    });
                }
            }
            this.$emit('formCommHandler',data)
        },
        colsConfigHandler(data, index) {
            console.log(data)
            console.log(this.tableParams.columns)
        },
        handleClose(done) {
            // this.$confirm('确认关闭？')
            // .then(_ => {
                done();
            // })
            // .catch(_ => {});
        },
        colsConfigDialogHandle() {
            this.colsConfigData = JSON.parse(JSON.stringify(this.colsConfigDialogData))
            this.tableHeader = this.colsConfigData
            this.colsConfigDialog = false
        } 
    }
}
</script>
<style scoped lang>
    .mt10{
        margin-top:10px;
    }
    .main{
        position:relative;

    }
</style>


